<template>
	<view>
		<view :class="{ 'fixed-info': fiexd }">
			<view :class="['top-title', isBg ? 'top-bg' : '']" :style="{ paddingTop: menuButton.top + 'px', height: menuButton.height + 'px' }">
				<view @click="$goBack" v-if="isBack" class="back-img" :style="{ height: menuButton.height + 'px' }">
					<image src="/static/img/back-f.png" mode="widthFix"></image>
				</view>
				<view class="name" :style="{ height: menuButton.height + 'px' }">{{ name }}</view>
			</view>
		</view>
		<view class="zanwei" v-if="fiexd" :style="{ paddingTop: menuButton.top + 'px', height: menuButton.height + 'px' }"></view>
	</view>
</template>

<script>
export default {
	name: 'pageTitle',
	props: ['name', 'isBg', 'isBack', 'fiexd'],
	data() {
		return {
			menuButton: {
				top: 10,
				height: 32
			}
		};
	},
	mounted() {
		// #ifdef MP
		this.menuButton = uni.getMenuButtonBoundingClientRect(); //获得胶囊位置
		// #endif
		console.log(this.menuButton);
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.zanwei {
	padding-bottom: 10rpx;
	box-sizing: content-box;
}

.fixed-info {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
}

.top-bg {
	background-image: url('@/static/img/bar-bg.png');
	background-position: 0 0;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.top-title {
	font-size: 36rpx;
	color: #ffffff;
	padding-bottom: 10rpx;
	position: relative;
	box-sizing: content-box;

	.name {
		position: absolute;
		left: 0;
		bottom: 10rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-img {
		position: absolute;
		left: 0;
		bottom: 10rpx;
		z-index: 99;
		width: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 28rpx;
			height: 28rpx;
		}
	}
}
</style>
